<template>
  <div class="roleList">
    <div class="userSheach">
      <n-form ref="formRef" inline :model="parmas">
        <n-form-item label="角色名称" path="user.name" label-placement="left">
          <n-input v-model:value="parmas.roleName" placeholder="请输入角色名称" />
        </n-form-item>
        <n-form-item label-placement="left">
          <n-button attr-type="button" type="info" @click="queryBtn">查询</n-button>
          <n-button attr-type="button" class="resetClass" @click="resetData">重置</n-button>
        </n-form-item>
      </n-form>
    </div>
    <div class="usertable">
      <div class="usertableAllBtn">
        <n-button type="info" class="addBtn" @click="addUser">创建</n-button>
      </div>
      <n-data-table :columns="columns" :data="tableData" :row-key="row => row.userid"
        @update:checked-row-keys="handleCheck" />
      <div class="userPagination">
        <span></span>
        <n-pagination :item-count="pagination.total" :on-update:page="updatePage" :on-update:page-size="updateSize"
          :page-sizes="[2, 5, 15, 40]" show-size-picker />
      </div>
    </div>
    <operationMadolVue ref="operFrom" @addUserClear="addUserClear" />
    <assignmentRoleVue ref="postRole" @getRole="getRole" />
  </div>
</template>
<script lang="ts">

import { defineComponent, ref, reactive, toRefs, h, onBeforeMount } from 'vue'
import { NButton,useMessage  } from 'naive-ui'
import operationMadolVue from './comments/operationMadol.vue'
import assignmentRoleVue from './comments/assignmentRole.vue'
import { roleList, roleOperate } from '../../../api/role.js'
const message = useMessage()
export default defineComponent({
  components: {
    operationMadolVue,
    assignmentRoleVue
  },
  setup() {
    const columns = [
      // {
      //   type: 'selection',
      //   disabled(row, index) {
      //       return row.name === 'Edward King 3'
      //   }
      // },
      {
        title: '角色名称',
        key: 'roleName'
      },
      {
        title: '备注',
        key: 'remark'
      },
      {
        title: '权限列表',
        key: 'status',
        render: (row) => {
          return row.status == 0 ? '离职' : row.status == 1 ? '实习' : row.status == 2 ? '在职' : row.status == 3 ? '离职' : '未知'
        }
      },
      {
        title: '创建时间',
        key: 'createTime',
        render:(row)=>{
         return  row.createTime.split('T')[0]
        }
      },
      {
        title: '更新时间',
        key: 'updatetime',
          render:(row)=>{
         return  row.updatetime.split('T')[0]
        }
      },
      {
        title: '操作',
        key: 'actions',
        render(row) {
          return h(
            'div',
            {},
            [
              h(
                NButton,
                {
                  size: 'small',
                  type: "info",
                  onClick: () => methods.sendMailEditor(row)
                },
                {
                  default: () => '编辑'
                }
              ),
              h(
                NButton,
                {
                  size: 'small',
                  type: "primary",
                  class: 'delteBtn',
                  onClick: () => methods.userOneRole(row)
                },
                {
                  default: () => '设置权限'
                }
              ),
              h(
                NButton,
                {
                  size: 'small',
                  type: "error",
                  class: 'delteBtn',
                  onClick: () => methods.userOneDelete(row)
                },
                {
                  default: () => '删除'
                }
              )
            ]
          )
        }
      }
    ]
    const operFrom = ref(null)
    const postRole = ref(null)
    const parameter = reactive({
      parmas: {
        pageNum: 1,
        pageSize: 10,
        roleName: '',
        // status: ''
      },
      pagination: {
        total: 10,
      },
      tableData: [],
      dataTable: [],
    })

    onBeforeMount(() => {
      methods.pageList(parameter.parmas)
    })

    const checkedRowKeysRef = ref([])
    const methods = reactive({
      // 列表
      pageList: (item) => {
        roleList(item).then(res => {
          parameter.pagination.total = res.page.total
          parameter.tableData = res.data
        })
      },
      handleCheck(rowKeys) {
        checkedRowKeysRef.value = rowKeys
      },
      //编辑
      sendMailEditor(item) {
        console.log('=====123123', item._id)
        let data = {
          action: 'edit',
          value: item,
          _id: item._id
        }
        operFrom.value.myCommand(data)

      },
      updatePage(e) {
        parameter.parmas.pageNum = e
        methods.pageList(parameter.parmas)
      },
      updateSize(e) {
        parameter.parmas.pageSize = e
        methods.pageList(parameter.parmas)
      },
      //创建
      addUser() {
        let data = {
          action: 'create'
        }
        operFrom._value.myCommand(data)
      },
      // 回应
      addUserClear(item) {
        methods.pageList(parameter.parmas)
      },
      // 删除
      userOneDelete(item) {
        roleOperate({ _id: item._id }).then(res => {
          message.success('删除成功')
          methods.pageList(parameter.parmas)
        })
      },
      // 设置权限
      userOneRole(item) {
        postRole.value.panel(item)
      },
      getRole(){
        methods.pageList(parameter.parmas)
      },
      // 查询
      queryBtn() {
        methods.pageList(parameter.parmas)
      },
      resetData() {
      parameter.parmas.roleName=''
      }
    })

    return {
      columns,
      operFrom,
      postRole,
      ...toRefs(methods),
      ...toRefs(parameter),
    }
  }



})
</script>

<style lang="scss">
.roleList {
  height: 100%;
  padding: 10px;
  // background: rgb(224, 220, 220);

  .usertable {
    height: 100%;
    padding: 10px;
    background: #fff;

    .usertableAllBtn {
      padding: 5px;
      display: flex;

      .addBtn {
        margin-right: 10px;
      }
    }

    .delteBtn {
      margin: 0 5px;
    }

    .userPagination {
      display: flex;
      justify-content: space-between;
      padding: 10px;
    }

  }

  .userSheach {
    background: #fff;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    font-size: 17px;
    padding: 20px 10px !important;

    .n-form-item-feedback-wrapper {
      min-height: auto !important;
    }

    .resetClass {
      margin-left: 10px;
    }
  }
}
</style>